<template>
  <el-divider content-position="left"> {{ detailsInfo.repairNo }}</el-divider>
  <el-descriptions column="3" border size="large" v-loading="dataLoading">
    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <HelpFilled />
          </el-icon>
          设备名称
        </div>
      </template>
      {{ detailsInfo.equipmentName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Memo />
          </el-icon>
          设备编码
        </div>
      </template>
      {{ detailsInfo.code }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <CopyDocument />
          </el-icon>
          规格型号
        </div>
      </template>
      {{ detailsInfo.equipmentModel }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Reading />
          </el-icon>
          故障分类
        </div>
      </template>
      {{ detailsInfo.faultName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Timer />
          </el-icon>
          故障发生时间
        </div>
      </template>
      {{ formatDate(new Date(detailsInfo.faultTime)) }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <UserFilled />
          </el-icon>
          申请人
        </div>
      </template>
      {{ detailsInfo.requestUserName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Histogram />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ detailsInfo.deptName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <StarFilled />
          </el-icon>
          紧急程度
        </div>
      </template>
      <dict-tag :type="DICT_TYPE.URGENCY" :value="detailsInfo.urgency" />
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <DocumentRemove />
          </el-icon>
          维修方式
        </div>
      </template>
      <dict-tag :type="DICT_TYPE.REPAIR_TYPE" :value="detailsInfo.repairWay" />
    </el-descriptions-item>





    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <Link />
          </el-icon>
          故障描述
        </div>
      </template>
      <div class="rich-text-content" v-html="detailsInfo.description"></div>
    </el-descriptions-item>


    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <User />
          </el-icon>
          提交人
        </div>
      </template>
      <el-tag size="small">{{ detailsInfo.creatorUserName }}</el-tag>
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div>
          <el-icon :style="iconStyle">
            <User />
          </el-icon>
          维修人
        </div>
      </template>
      {{ detailsInfo.dutyUserName }}
    </el-descriptions-item>
  </el-descriptions>


  <el-divider content-position="right">制单人1: {{ detailsInfo.creatorUserName }} 制单时间: {{ formatDate(new
    Date(detailsInfo.createTime)) }}</el-divider>

</template>
<script lang="ts" setup>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('维修申请单') // 弹窗的标题
import { propTypes } from '@/utils/propTypes'
import { RepairRequestApi, RepairRequest } from '@/api/business/repairrequest'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter, formatDate } from '@/utils/formatTime'

defineOptions({ name: 'MaintenanceInformationView' })

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap.large,
  }
})

const detailsInfo = ref({
  id: undefined,
  repairNo: undefined,
  faultId: undefined,
  faultName: undefined,
  equipmentModel: undefined,
  deptName: undefined,
  creatorUserName: undefined,
  createTime: undefined,
  equipmentId: undefined,
  equipmentName: undefined,
  faultTime: undefined,
  requestUserId: undefined,
  requestUserName: undefined,
  urgency: undefined,
  description: undefined,
  repairWay: 1,
  dutyUserId: [],
  dutyUserName: undefined,
  status: undefined,
  resolved: undefined,
  expectedResolveTime: undefined
})

const dataLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

//
const isView = ref(false)

/** 打开弹窗 */
const openDetailInfo = async (id?: number, type: string) => {
  dialogVisible.value = true
  isView.value = type
  // 修改时，设置数据
  if (id) {
    dataLoading.value = true
    try {
      detailsInfo.value = await RepairRequestApi.getRepairRequest(id)
    } finally {
      dataLoading.value = false
    }
  }
}

defineExpose({ openDetailInfo }) // 提供 openDetailInfo 方法，用于打开弹窗显示详细信息



</script>
